<template>
  <div v-loading="loading" style="height: 100%">
    <vue3-tree-org
      :data="chartData"
      :horizontal="false"
      :collapsable="true"
      :center="true"
      :label-style="style"
      :node-draggable="true"
      :props="{ id: 'id', pid: 'parentId', label: 'name', expand: 'expand', children: 'children' }"
      :scalable="true"
      :only-one-node="true"
      :default-expand-level="2"
      :clone-node-drag="true"
      @on-contextmenu="onMenus"
      @on-node-click="onNodeClick"
    >
      <!-- 自定义节点内容 -->
      <template v-slot="{ node }">
        <div p-10px w-200px h-80px text-left bd-000>
          <div>组织名称：{{ node.$$data.name }}</div>
          <div>组织名称：{{ node.$$data.leaderName }}</div>
          <div>组织名称：{{ node.$$data.name }}</div>
        </div>
      </template>
      <!-- 自定义展开按钮 -->
      <template v-slot:expand="{ node }">
        <div>{{ node.children.length }}</div>
      </template>
    </vue3-tree-org>
  </div>
</template>
<script setup lang="ts">
import DeptAPI, { DeptQuery } from "@/api/system/dept.api";

const chartData = ref({});

const loading = ref(false);
const queryParams = reactive<DeptQuery>({});

function getChartData() {
  loading.value = true;
  DeptAPI.getList(queryParams).then(async (data) => {
    await nextTick();

    chartData.value = data[0];
    console.log(chartData.value);
    loading.value = false;
  });
}

const style = {
  background: "#fff",
  color: "#5e6d82",
};

function onNodeClick(e: MouseEvent, data: any) {
  console.log(e, data);
}

function onMenus({ node, command }: { node: any; command: any }) {
  console.log(node, command);
}

onMounted(async () => {
  getChartData();
});
</script>
<style lang="scss" scoped>
.tree-org-node__text {
  font-size: 14px;
  text-align: left;
  .custom-content {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid currentColor;
  }
}
</style>
